import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import type { NodeProps } from '@xyflow/react';
import { useTranslation } from 'react-i18next';
import './CustomNode.css';

const CustomNode = memo(({ data, type }: NodeProps) => {
  const { t } = useTranslation();
  const isInputNode = type === 'read_csv';

  // Render label by translating the tKey if it exists, otherwise fallback to data.label
  const label = data.tKey ? t(data.tKey) : (data.label || 'Custom Node');

  return (
    <div className="custom-node-body">
      {!isInputNode && (
        <Handle
          type="target"
          position={Position.Left}
          className="handle"
        />
      )}

      <div className="node-label">
        {label}
      </div>

      <Handle
        type="source"
        position={Position.Right}
        className="handle"
      />
    </div>
  );
});

export default CustomNode;